<template>
    <div class="edu-page-warp">
        <ConditionCard shadow="never" body-style="padding: 24px 24px 6px 24px;" label-position="right" @search="search" @reset="reset('queryForm')">
            <el-form ref="queryForm" :model="queryForm" label-position="right" label-width="120px">
            <el-row :gutter="24" style="height: 50px;">
                <el-col :span="8">
                    <el-form-item label="年级:" prop="grade">
                        <el-date-picker
                            style="width:100%"
                            v-model="queryForm.grade"
                            type="year"
                            value-format="yyyy"
                            placeholder="选择年级"
                        ></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                <el-form-item label="学院">
                    <DictSelect
                        v-model="queryForm.faculty"
                        :data="options.faculty"
                        :clearable="false"
                        @change="changeFaculty"
                    ></DictSelect>
                </el-form-item>
                </el-col>
                <el-col :span="8">
                <el-form-item label="专业">
                    <DictSelect
                        v-model="queryForm.profession"
                        :data="options.profession"
                        :clearable="false"
                    ></DictSelect>
                </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="24" style="height: 50px;">
                <el-col :span="8">
                <el-form-item label="培养层次">
                    <DictSelect
                        v-model="queryForm.trainingLevel"
                        :data="options.trainingLevel"
                        :clearable="false"
                    ></DictSelect>
                </el-form-item>
                </el-col>
                <el-col :span="8">
                <el-form-item label="培养类别">
                    <DictSelect
                        v-model="queryForm.studentCategory"
                        :data="options.studentCategory"
                        :clearable="false"
                    ></DictSelect>
                </el-form-item>
                </el-col>
                <el-col :span="8">
                <el-form-item label="学位类型">
                    <DictSelect
                        v-model="queryForm.degreeType"
                        :data="options.degreeType"
                        :clearable="false"
                    ></DictSelect>
                </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="24" style="height: 50px;">
                <el-col :span="8">
                <el-form-item label="学习形式">
                    <DictSelect
                        v-model="queryForm.learningForm"
                        :data="options.learningForm"
                        :clearable="false"
                    ></DictSelect>
                </el-form-item>
                </el-col>
                <el-col :span="8">
                    <!--暂时没有字典数据-->
                <el-form-item label="维护类别">
                    <DictSelect
                        v-model="queryForm.learningForm"
                        :data="options.learningForm"
                        :clearable="false"
                    ></DictSelect>
                </el-form-item>
                </el-col>
            </el-row>
            </el-form>
        </ConditionCard>
        <div class="edu-page-title mg-top">应缴费学生名单</div>
        <el-card shadow="never" body-style="padding: 24px;">
            <div class="edu-opertion-bar">
                <div class="float-right">
                    <el-button plain @click="downloadTemplate()">导入模板下载</el-button>
                    <el-button plain @click="batchImport()">导入</el-button>
                    <el-button plain @click="exportFile()">{{ $t('message.export') }}</el-button>
                    <el-button type="primary" @click="addItem()">新增</el-button>
                    <el-button type="danger" @click="deleteItems()">删除</el-button>
                </div>
            </div>
            <edu-table stripe style="width: 100%"
                @page-change="handleCurrentChange"
                :data="students"
                :total="students.length"
                :pageSize="queryForm.pageSize_"
                :current-page="queryForm.pageNum_"
                :pagination='true'
                :selection="true"
                :order="false"
                @selection-change="handlerSelectionChange"
            >
                <el-table-column prop="studentId" label="学号" width="80"/>
                <el-table-column label="姓名" width="100">
                    <template slot-scope="scope">{{ scope.row.name }}</template>
                </el-table-column>
                <el-table-column label="年级" width="100">
                    <template slot-scope="scope">{{ scope.row.grade }}</template>
                </el-table-column>
                <el-table-column label="学院">
                    <template slot-scope="scope">{{ scope.row.facultyI18n }}</template>
                </el-table-column>
                <el-table-column label="专业">
                    <template slot-scope="scope">{{ scope.row.professionI18n }}</template>
                </el-table-column>
                <el-table-column label="培养层次">
                    <template slot-scope="scope">{{ scope.row.trainingLevelI18n }}</template>
                </el-table-column>
                <el-table-column label="培养类别">
                    <template slot-scope="scope">{{ scope.row.studentCategoryI18n }}</template>
                </el-table-column>
                 <el-table-column label="学位类型">
                    <template slot-scope="scope">{{ scope.row.degreeTypeI18n }}</template>
                </el-table-column>
                 <el-table-column label="学习形式">
                    <template slot-scope="scope">{{ scope.row.learningFormI18n }}</template>
                </el-table-column>
                <el-table-column label="维护类型">
                    <template slot-scope="scope">{{ scope.row.learningFormI18n }}</template>
                </el-table-column>
                <el-table-column label="操作" width="90">
                    <template slot-scope="scope">
                        <el-button type="text" size="mini" @click="editItem(scope.row)">编辑</el-button>
                        <el-button type="text" size="mini" @click="deleteItem(scope.row)">删除</el-button>
                        <!-- <el-button type="text" @click="editTask(scope.row)" size="mini">编辑</el-button> -->
                    </template>
                </el-table-column>
            </edu-table>
        </el-card>
        <!--添加应缴费弹窗-->
        <el-dialog
            width="60%"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :title.sync="dialogTitle"
            :visible.sync="showDialog" 
            :before-close="handleClose"
        >
            <el-form
                :model="form"
               
                :rules="rules"
                ref="addItemForm"
                label-width="140px"
                label-position="right"
            >
                <div class="edu-page-title">基础信息</div>
                
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="学号:" >
                                <el-input
                                    v-model="current.studentId"
                                    placeholder="请输入"
                                    :disabled="flagEdit"
                                    @keyup.enter.native="getUserInfoById"
                                    @blur="getUserInfoById"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="姓名:">
                                <el-input v-model="current.name" :disabled="true"/>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="年级:">
                                <el-input v-model="current.grade" :disabled="true"/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="学院:">
                                <el-input v-model="current.facultyI18n" :disabled="true"/>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="专业:">
                                <el-input
                                    v-model="current.professionI18n"
                                    :disabled="true"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item
                                label="培养层次:"
                            >
                                <el-input
                                    v-model="current.trainingLevelI18n"
                                    :disabled="true"
                                />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item
                                label="培养类别:"
                            >
                                <el-input
                                    v-model="current.studentCategoryI18n"
                                    :disabled="true"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item
                                label="学位类型:"
                            >
                                <el-input
                                    v-model="current.degreeTypeI18n"
                                    :disabled="true"
                                />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item
                                label="学习形式:"
                            >
                                <el-input
                                    v-model="current.formLearningI18n"
                                    :disabled="true"
                                />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <div class="edu-page-title">学年应缴费信息</div>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item
                            label="第一学年第1学期:"
                            prop="semester1"
                        >
                            <el-input v-model="form.semester1" placeholder="请输入"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item
                            label="第一学年第2学期:"
                            prop="semester2"
                        >
                            <el-input v-model="form.semester2" placeholder="请输入"/>
                        </el-form-item>
                    </el-col>
                   
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item
                            label="第二学年第1学期:"
                            prop="semester3"
                        >
                            <el-input v-model="form.semester3" placeholder="请输入"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item
                            label="第二学年第2学期:"
                            prop="semester4"
                        >
                            <el-input v-model="form.semester4" placeholder="请输入"/>
                        </el-form-item>
                    </el-col>
                   
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item
                            label="第三学年第1学期:"
                         
                            prop="semester5"
                        >
                            <el-input v-model="form.semester5" placeholder="请输入"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item
                            label="第三学年第2学期:"
    
                            prop="semester6"
                        >
                            <el-input v-model="form.semester6" placeholder="请输入"/>
                        </el-form-item>
                    </el-col>
                  
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item
                            label="第四学年第1学期:"
                            prop="semester7"
                        >
                            <el-input v-model="form.semester7" placeholder="请输入"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item
                            label="第四学年第2学期:"
                            prop="semester8"
                        >
                            <el-input v-model="form.semester8" placeholder="请输入"/>
                        </el-form-item>
                    </el-col>
                  
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item
                            label="第五学年五第1学期:"
                            prop="semester9"
                        >
                            <el-input v-model="form.semester9" placeholder="请输入"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item
                            label="第五学年第2学期:"
                            prop="semester10"
                        >
                            <el-input v-model="form.semester10" placeholder="请输入"/>
                        </el-form-item>
                    </el-col>
                   
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item
                            label="第六学年第1学期:"
                            prop="semester11"
                        >
                            <el-input v-model="form.semester11" placeholder="请输入"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item
                            label="第六学年第2学期:"
                            prop="semester12"
                        >
                            <el-input v-model="form.semester12" placeholder="请输入"/>
                        </el-form-item>
                    </el-col>
                    
                </el-row>
                <el-row :gutter="20" type="flex" justify="center">
                    <el-col :span="24">
                        <el-form-item label="备注：" style="flex:1">
                            <el-input
                                v-model="form.comments"
                                placeholder="请输入"
                                type="textarea"
                                style="width:100%"
                            />
                        </el-form-item>
                    </el-col>
                   
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-form-item label="总应缴费用：">
                            <el-input v-model="sum" :disabled="true"/>
                        </el-form-item>
                    </el-col>
                  
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="showDialog = false">取 消</el-button>
                <el-button
                    type="primary"
                    @click="handlerAddItem"
                    :disabled="falgCanNotSubmit"
                >确 定</el-button>
            </span>
        </el-dialog>
       
        <!--批量导入弹窗-->
        <el-dialog
            :title.sync="batchImportDialog.dialogTitle"
            :visible.sync="batchImportDialog.showDialog"
            width="30%"
        >
            <el-upload
                action="/api/studentservice/paymentlist/importPaymentList"
                class="upload-demo"
                ref="upload"
                :on-success="handlerSuccess"
                :on-error="handlerError"
                accept="xlsx"
                :auto-upload="true"
            >
                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            </el-upload>
            <span slot="footer" class="dialog-footer">
                <el-button @click="batchImportDialog.showDialog = false">关闭</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import * as API from "common/src/api/arrearsStudentList";
import { queryDic } from "common/src/api/dictionary";
import utils from "common/src/utils/utils";
// import deleteDialog from "./DeleteItems";
export default {
    name: "ArrearsStudentList",
    // components: { deleteDialog },
    data() {
        const getGrade = (function() {
            const now = new Date().getFullYear();
            const years = [];
            for (let i = 0; i < 6; i++) {
                years.push({
                    label: now - i,
                    value: now - i
                });
            }
            return years;
        })();
        return {
            loading: false,
            formLabelWidth: "100px",
            queryForm: {
                grade: "",
                faculty: "",
                trainingLevel: "",
                profession: "",
                studentCategory: "",
                keyWord: "",
                pageNum_: 1,
                pageSize_: 20
            },
            options: {
                trainingLevel: [],
                grade: getGrade,
                faculty: [],
                profession: [],
                studentCategory: []
            },
            students: [{},{}],
            total: 0,
            selectedItems: [],
            dialogTitle: "应缴费金额",
            showDialog: false,
            flagEdit: false,
            tipText: "",
            falgCanNotSubmit: true,
            form: {},
            formLabelWidth: "120px",
            studentInfoLabelWidth: "80px",
            current: {},
            rules: {
                semester1: [
                    {
                        validator: this.checkInt,
                        trigger: "blur"
                    }
                ],
                semester2: [
                    {
                        validator: this.checkInt,
                        trigger: "blur"
                    }
                ],
                semester3: [
                    {
                        validator: this.checkInt,
                        trigger: "blur"
                    }
                ],
                semester4: [
                    {
                        validator: this.checkInt,
                        trigger: "blur"
                    }
                ],
                semester5: [
                    {
                        validator: this.checkInt,
                        trigger: "blur"
                    }
                ],
                semester6: [
                    {
                        validator: this.checkInt,
                        trigger: "blur"
                    }
                ],
                semester7: [
                    {
                        validator: this.checkInt,
                        trigger: "blur"
                    }
                ],
                semester8: [
                    {
                        validator: this.checkInt,
                        trigger: "blur"
                    }
                ],
                semester9: [
                    {
                        validator: this.checkInt,
                        trigger: "blur"
                    }
                ],
                semester10: [
                    {
                        validator: this.checkInt,
                        trigger: "blur"
                    }
                ],
                semester11: [
                    {
                        validator: this.checkInt,
                        trigger: "blur"
                    }
                ],
                semester12: [
                    {
                        validator: this.checkInt,
                        trigger: "blur"
                    }
                ]
                
            },
            batchImportDialog: {
                dialogTitle: "批量上传",
                showDialog: false
            }
        };
    },
    mounted() {
        this.initOptions();
    },
    methods: {
        handlerSuccess(response, file, fileList) {
            let responseCode = response.code;
            if (responseCode === 200) {
                this.$message({
                    message: "上传成功！",
                    type: "success"
                });
                this.onSubmit();
            } else {
                this.$message({
                    message: "文件列名错误或文件为空！",
                    type: "error"
                });
            }
            this.batchImportDialog.showDialog = false;
        },
        handlerError(rresponse, file, fileList) {
            this.$message({
                message: "上传失败！",
                type: "error"
            });
            this.batchImportDialog.showDialog = false;
        },
        checkInt(rule, value, callback) {
            if (!/^[1-9]\d*(\.\d+)?$|^0(\.\d*[1-9]\d*)?$/.test(value)) {
                return callback(new Error("请输入数字"));
            }
            return callback();
        },
        initOptions() {
            const data = {
                lang: this.$store.getters.language || "cn",
                type: "allChild",
                keys: ["X_PYCC", "X_YX", "X_PYLB"]
            };
            queryDic(data).then(res => {
                if (res.code === 200) {
                    this.fillSelect(res.data);
                    //this.onSubmit();
                }
            });
        },
        changeFaculty(val) {
            this.options["profession"] = [];
            const data = {
                lang: this.$store.getters.language || "cn",
                type: "allChild",
                keys: ["G_ZY"],
                filter: {
                    prefix: [val],
                    specilaCode: "XY2ZY"
                }
            };
            queryDic(data).then(res => {
                if (res.code === 200) this._fill("profession", res.data.G_ZY);
            });
        },
        fillSelect(data) {
            let { X_PYCC, X_YX, X_PYLB } = data;
            this._fill("trainingLevel", X_PYCC);
            this._fill("faculty", X_YX);
            this._fill("studentCategory", X_PYLB);
            // this._fill("profession", data.G_ZY);
        },
        _fill(type, data) {
            for (const key in data) {
                this.options[type].push({
                    value: key,
                    label: data[key]
                });
            }
        },
        onSubmit() {
            this.loading = true;
            API.getArrearsStudentList(this.queryForm)
                .then(response => {
                    if (response.code === 200) {
                        this.students = response.data.list;
                        this.total = response.data.total_;
                    } else throw response.code;
                })
                .finally(() => (this.loading = false));
        },
        addItem() {
            this.current = {};
            this.form = {};
            this.flagEdit = false;
            this.showDialog = true;
            this.falgCanNotSubmit = true;
        },
        editItem(item) {
            this.flagEdit = true;
            this.showDialog = true;
            this.falgCanNotSubmit = false;
            this.current = item;
            let {
                semester1,
                semester2,
                semester3,
                semester4,
                semester5,
                semester6,
                semester7,
                semester8,
                semester9,
                semester10,
                semester11,
                semester12,
                sum,
                studentId,
                comments
            } = item;
            this.form = {
                semester1,
                semester2,
                semester3,
                semester4,
                semester5,
                semester6,
                semester7,
                semester8,
                semester9,
                semester10,
                semester11,
                semester12,
                sum,
                studentId,
                comments
            };
        },
        getUserInfoById() {
            API.getArrearsStudentDetail({
                studentId: this.current.studentId
            }).then(
                response => {
                    let { code, data } = response;
                    if (code === 200) {
                        // 添加的情况
                        if (!this.flagEdit) {
                            //如果发现学生已经设置过缴费
                            if (data) {
                                if (data.sum) {
                                    this.$message({
                                        message:
                                            "该学生已设置完成缴费金额，请在编辑中修改!",
                                        type: "error"
                                    });
                                    this.falgCanNotSubmit = true;
                                } else {
                                    // 如果学生没设置缴费

                                    this.falgCanNotSubmit = false;
                                }
                                this.current = data;
                            } else {
                                this.$message({
                                    message: `不存在学号为${
                                        this.current.studentId
                                    }的学生`,
                                    type: "error"
                                });
                            }
                        }
                    }
                },
                xhr => {
                    this.falgCanNotSubmit = true;
                }
            );
        },
        handlerAddItem() {
            // 验证输入是否都正确
            this.$refs["addItemForm"].validate(valid => {
                if (valid) {
                    // 编辑时提交
                    if (this.flagEdit) {
                        this.form.sum = this.sum;
                        API.editArrearsStudent(this.form)
                            .then(
                                response => {
                                    if (response.code === 200) {
                                        this.$message({
                                            message: "修改成功",
                                            type: "success"
                                        });
                                        this.onSubmit();
                                    }
                                },
                                xhr => {}
                            )
                            .finally(
                                () => (this.showDialog = false)
                            );
                    } else {
                        // 添加时提交
                        API.getArrearsStudent({
                            ...this.form,
                            sum: this.sum,
                            studentId: this.current.studentId
                        })
                            .then(
                                response => {
                                    if (response.code === 200) {
                                        this.$message({
                                            message: "添加成功",
                                            type: "success"
                                        });
                                        this.onSubmit();
                                    }
                                },
                                xhr => {}
                            )
                            .finally(() => {
                                this.showDialog = false;
                            });
                    }
                }
            });
        },
        handleClose(done) {
            this.current = {};
            this.form = {};
            done();
        },
        handleCurrentChange(val) {
            this.queryForm.pageNum_ = val;
            this.onSubmit();
        },
        handleSizeChange(val) {
            this.queryForm.pageSize_ = val;
            this.onSubmit();
        },
        handlerSelectionChange(val) {
            this.selectedItems = val;
        },
        reset() {
            this.queryForm.trainingLevel = "";
            this.queryForm.grade = "";
            this.queryForm.faculty = "";
            this.queryForm.profession = "";
            this.queryForm.studentCategory = "";
            this.queryForm.keyWord = "";
            this.queryForm.pageNum_ = 1;
            this.queryForm.pageSize_ = 20;
            this.onSubmit();
        },
        downloadTemplate() {
            let columns = [
                [
                    "学号",
                    "总应交费用",
                    "第1学年第一学期",
                    "第1学年第二学期",
                    "第2学年第一学期",
                    "第2学年第二学期",
                    "第3学年第一学期",
                    "第3学年第二学期",
                    "第4学年第一学期",
                    "第4学年第二学期",
                    "第5学年第一学期",
                    "第5学年第二学期",
                    "第6学年第一学期",
                    "第6学年第二学期"
                ]
            ];
            utils.exportAsXlsx(columns, "应缴费名单导入模板.xlsx");
        },
        batchImport() {
            this.batchImportDialog.showDialog = true;
        },
        // uploadFile() {
        //     let file = this.$refs.upload.fileList[0]
        //     if (!file) {
        //         this.$message({
        //             type: 'error',
        //             message: '没选择任何文件！',
        //         })
        //         return
        //     }
        //     if (!/.+\.xlsx$/.test(file.name)) {
        //         this.$message({
        //             type: 'error',
        //             message: '请选择xlsx结尾的文件！',
        //         })
        //         return
        //     }
        //     this.$refs.upload.submit()
        // },
        exportFile() {
            let params = utils.clone(this.queryForm);
            params.hasOwnProperty("pageNum_") && delete params.pageNum_;
            params.hasOwnProperty("pageSize_") && delete params.pageSize_;
            if (!this.isAllKeyEmpty(params)) {
                return this.$message({
                    type: "error",
                    message: "请选择至少一个条件导出数据！"
                });
            }
            API.exportArrearsStudentList(params);
            //findStuInfoListExport(this.queryForm)
        },
        isAllKeyEmpty(obj = {}) {
            return !!Object.values(obj).join("");
        }
    },
    computed: {
        sum() {
            let keys = Object.keys(this.form).filter(
                item => item.indexOf("semester") === 0
            );
            return keys.reduce((prev, curr) => {
                if (
                    /^[1-9]\d*(\.\d+)?$|^0(\.\d*[1-9]\d*)?$/.test(
                        this.form[curr]
                    )
                ) {
                    prev += +this.form[curr] || 0;
                }
                return prev;
            }, 0);
        }
    }
};
</script>
<style>
</style>
